<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body>
        <!-- <el-form ref="form" :model="model" :rules="rules" label-width="110px" label-suffix=":">
            <el-form-item label="物流公司" prop="_物流公司">
                <SelectPage
                    v-model="model._物流公司"
                    placeholder="请选择物流公司"
                    :url="$api.purchase.getTrackList"
                    show_field="label"
                    show_id="value"
                    query_field="keyword"
                    filterable
                    clearable
                    popper-class="custom-select"
                    style="width: 240px"
                ></SelectPage>
            </el-form-item>
            <el-form-item label="运单编号" prop="_运单编号">
                <el-input v-model.trim="model._运单编号" placeholder="请填写运单编号" clearable style="width: 240px"></el-input>
            </el-form-item>
        </el-form> -->
        <div class="layout-route">
          <div class="card">
            <div class="mb8">
              <el-button type="primary" icon="el-icon-plus" @click="addItem">添加</el-button>
            </div>
            <el-table
              :data="model.track_info"
              border
              script
              style="width: 100%"
            >
          <el-table-column label="物流商">
            <template slot-scope="scope">
              <SelectPage
                v-model="scope.row.track_name"
                placeholder="请选择物流公司"
                :url="$api.purchase.getTrackList"
                show_field="label"
                show_id="label"
                query_field="keyword"
                filterable
                clearable
                popper-class="custom-select"
              />
            </template>
          </el-table-column>
          <el-table-column label="运单号">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.track_number" placeholder="请填写运单编号" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          </div>
        </div>
        <div slot="footer" class="dialo2-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editTrackNumber } from '@/api/purchase'
export default {
    name: 'TrackInfoDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            model: {
                purchase_number: '',
                track_info: [],
            },
            rules: {
                // _物流公司: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
                // _运单编号: [{ required: true, message: '请填写运单编号', trigger: 'blur' }],
            },
            dict: {},
            save: false,
            loading: false,
        }
    },
    computed: {
        title() {
            return `新增物流信息`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {},
    mounted() {
        this.model.purchase_number = this.params.purchase_number
        this.model.track_info = this.params.track_info || []
    },
    methods: {
      addItem() {
            this.model.track_info.push({
                track_name: '',
                track_number: '',
            })
        },
      handleDelete(row) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.model.track_info = this.model.track_info.filter(item => item.track_number !== row.track_number)
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        submit() {
            // this.$refs.form.validate(valid => {
            //     if (!valid) {
            //         return
            //     }
            if(this.model.track_info.length == 0) {
                return this.$message.error('请添加物流信息')
            }
                this.save = true
                const params = { ...this.model }
                editTrackNumber(params)
                    .then(() => {
                        this.$message.success('操作成功')
                        this.$emit('success', true)
                        this.cancel()
                    })
                    .finally(() => {
                        this.save = false
                    })
            // })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.color-list {
    display: flex;
    align-items: center;
    height: 36px;
}
.color-item {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #fff;
}
</style>
